<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe6b4;</div>
    </div>
    <div class="header-input">
      <span class="iconfont header-search">&#xe650;</span>
      输入城市/景点/游玩主题
    </div>
    <router-link to="/city">
      <div class="header-right">
        {{this.currentCity}}
        <span class="arrow-icon"></span>
      </div>
    </router-link>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState({
      currentCity: 'city'
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import '~styles/variable.styl'
@import '~styles/mixins.styl'
.header
  display flex
  line-height  86px
  background-color $bgColor
  color #fff
  align-items center
  .header-left
    width 64px
    height 100%
    margin-right 10px
    margin-left 10px
    text-align center
    .back-icon
      display inline-block
      height 100%
      font-size 24px
      height 100%
  .header-input
    flex 1
    background-color #fff
    line-height 64px
    color #cccccc
    border-radius 5px
    font-size 20px
    .header-search
      display inline-block
      font-size 20px
      padding-left 10px
      margin-right 10px
      box-sizing border-box
  .header-right
    height 100%
    margin-right 20px
    text-align center
    position relative
    font-size 20px
    color #fff
    padding:0 25px 0 10px
    box-sizing border-box
    .arrow-icon
      position absolute
      content "" !important
      width 0
      height 0
      border 10px solid transparent
      border-top-color #fff
      top 50%
      right 0
      transform translateY(-35%)
</style>
